<script setup>
import {reactive, ref} from "vue";
//定义一个购物车
const cars = reactive([
  {name: '可乐', price: 5, number: 10},
  {name: '薯片', price: 8, number: 20},
])

//定义一个计算购物车总金额的方法
function compute() {
  let count = 0
  for (let index in cars) {
    count += cars[index].price * cars[index].number
  }
  return count
}

//定义一个删除的方法
function removeCart(index) {
  cars.splice(index, 1)
}
</script>

<template>
  <!--列表渲染语句-->
  <div>
    <table>
      <thead>
      <tr>
        <th>序号</th>
        <th>商品名</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总金额</th>
        <th>操作</th>
      </tr>
      </thead>
      <!--判断对象中是否有数据-->
      <tbody v-if="cars.length>0">
      <tr v-for="(item,index) in cars">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
        <td>{{item.number}}</td>
        <td>{{item.price*item.number + '元'}}</td>
        <td><button @click="removeCart(index)">删除</button></td>
      </tr>
      </tbody>
      <tbody v-else>
        <!-- 没有数据显示-->
        <tr>
          <td colspan="6">购物车没有数据!</td>
        </tr>
      </tbody>
    </table>
    购物车的总金额为：{{compute()}}
  </div>
</template>

<style scoped>

</style>